<template>
	<view class="personal">
		<view class="header flexR">
			<view class="left">
				<!-- <image src="../../../static/images/swiper/2.jpg" mode="scaleToFill"></image> -->
				<text class="iconfont" :class="userIcon"></text>
			</view>
			<view class="right">
				<view class="name">
					{{userInfo.name||''}}
				</view>
				<view class="IDcard">
					<text class="iconfont icon-ka"></text>
					<text>{{getCardNo}}</text>
				</view>
			</view>
			<!-- <view class="position-top" @click="toPageRegister">
				<text class="iconfont icon-V"></text>
			</view> -->
			<view class="position-bottom flexR">
				<view class="flexR">
					<view class="user" @click="onTClick('showUserList')">
						<text class="iconfont" :class="userNum>1?'icon-switchuser':'icon-svg-'"></text>
						<text>{{userNum>1?'切换':'添加'}}就诊人</text>
					</view>
					<view class="code" @click="onTClick('showCode')">
						<text class="iconfont icon-saoyisaosaomiao"></text>
						<text>我的就诊码</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<u-cell-group>
				<u-cell-item  :title="item.name" arrow-direction="right" v-for="(item, i ) in lists" :key='i' @click='toPage(item)'>
					<text slot="icon" class="iconfont" size="32" :class="item.icon" :style="{color:item.color}" style="margin-right: 10rpx;"></text>
				</u-cell-item>
			</u-cell-group>
		</view>
		<List :showCode='showCode' :showUserList='showUserList' @close='onClose'></List>
		<Load :load="load" />
	</view>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex';
	import { getMenu } from '@/api/home.js'
	import Load from '@/components/Load/index.vue'
	import List from '@/components/UserInfo/list.vue'
	export default {
		components:{ Load, List },
		data() {
			return {
				load:false,
				showCode:false,
				showUserList:false,
				lists:[]
			};
		},
		computed:{
			...mapGetters(['userInfo', 'userList']),
			userIcon(){
				if(this.userInfo.sex){
					return this.userInfo.sex==='女'?'icon-iconfontnvtouxiang':'icon-lianxirenxuanzhong'
				}else{
					return 'icon-lianxirenxuanzhong'
				}
			},
			getCardNo(){
				if(this.userInfo&&Object.keys(this.userInfo).length){
					if(this.userInfo.idCard===this.userInfo.cardNo){
						let res = this.userInfo.cardNo, len = this.userInfo.cardNo.length, str=''
						for(let i=0; i<(len-6); i++){
							str +="*"
						}
						return res.substring(0,3) + str + res.substring(len-3)
					}else{
						return this.userInfo.cardNo
					}
				}else{
					return ''
				}
			},
			userNum(){
				if(this.userList&&this.userList.length){
					return this.userList.length
				}else{
					return 0
				}
			}
		},
		created(){
			this.getMenus()
		},
		methods: {
			...mapActions(['userDetail']),
			toPageRegister(){
				this.load = true
				this.userDetail(this.userInfo.patId).then((data)=> {
					this.load = false
					let res = JSON.stringify(data||'')
					uni.navigateTo({
						url:'/pages/Login/register?editInfo=' + res
					})
				}).catch(e => this.load = false)
			},
			toPage(val){
				uni.navigateTo({
					url:val.route
				})
			},
			getMenus(){
				const type = '4'
				this.load = true
				getMenu({type}).then(data => {
					this.load = false
					let list = [], res = data[type]
					res.forEach(item => {
						list.push({
							icon:item.iconPath,
							name:item.name,
							color:item.color,
							route:item.route
						})
					})
					this.lists = list;
					// if(!this.userInfo.patId){
					// 	this.$u.toast('请前往绑卡')
					// 	uni.navigateTo({
					// 		url:'/pages/Login/index'
					// 	})
					// }
				}).catch(e => {
					this.load = false
				})
			},
			onClose(type){
				this[type] = false
			},
			onTClick(type){
				if(type==='showUserList'){
					if(this.userNum>1){
						this[type] = true
					}else{
						uni.navigateTo({
							url:'/pages/Login/addPatient'
						})
					}
				}else{
					this[type] = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal{
		background-color: #fff;
		height: calc(100vh - 50px);
		overflow: scroll;
		.header{
			background-image: url(../../../static/images/bg-header/personal_header.png);
			background-size: cover;
			color: #fff;
			padding-top: 70rpx;
			height: 340rpx;
			position: relative;
			.left{
				margin-left: 50rpx;
				height: 130rpx;
				width: 131rpx;
				background-color: #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				>image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				>.iconfont{
					font-size: 80rpx;
					color: $theme-color-light;
				}
			}
			.right{
				margin-left: 37rpx;
				.name{
					font-size: 39rpx;
				}
				.IDcard{
					font-size: 30rpx;
					margin-top: 20rpx;
					>.iconfont{
						margin-right: 10rpx;
					}
				}
			}
			.position-top{
				position: absolute;
				right: 22rpx;
				top: 28rpx;
				height: 60rpx;
				width: 60rpx;
				background-color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
				border-radius: 50%;
				.iconfont{
					font-size: 32rpx;
					color: $theme-color-light;
				}
			}
			.position-bottom{
				position: absolute;
				bottom: -16rpx;
				color: $text-color;
				width: 100%;
				justify-content: center;
				.flexR{
					height: 120rpx;
					background-color: #fff;
					width: 93%;
					border-radius: 12rpx;
					justify-content: space-around;
					align-items: center;
					>view{
						height: 100%;
						display: flex;
						align-items: center;
					}
					box-shadow: 9rpx 9rpx 9rpx rgba($color: #000000, $alpha: .03);
					.iconfont{
						color: $theme-color-light;
						margin-right: 10rpx;
					}
				}
			}
		}
		.main{
			margin-top: 40rpx;
		}
	}
</style>
